<div class="market-detail-container">
    <!-- 头 -->
    <div class="market-fns clearfix">
        <!-- logo -->
        <div class="market-fns-logo pull-left">
            <a href="javascript:;" [routerLink]="['/index']">
                <img src="assets/image/market-logo.png" alt="logo">
            </a>
        </div>
        <!-- 面板 -->
        <div class="market-fns-pannel-toggle pull-left">
            <span class="market-fns-pannel-toggle-handle">查看全部商品</span>
            <!-- <app-providers-products></app-providers-products> -->
        </div>
        <!-- 交易品 -->
        <div class="market-fns-product pull-left">
            {{category}}
        </div>
        <!-- 自选 -->
        <div class="text-center market-fns-add-btn pull-left">
            <button class="btn market-info-btn"><i class="glyphicon glyphicon-plus"></i>&nbsp;加入自选</button>
        </div>
        <!-- 涨跌停 -->
        <div class="market-price market-fns-price long pull-left">
            <span class="market-fns-price-unit">
                最新
                <span [class.market-fns-limitup]="realTimeList[0]?.percent>0" [class.market-fns-limitdown]="realTimeList[0]?.percent<=0">
                    {{realTimeList[0]?.CurrentPrice}}(<span *ngIf="realTimeList[0]?.percent>=0">+</span>{{realTimeList[0]?.percent | number: '1.2-2'}}%)
            </span>
            </span>
            <span class="market-fns-price-unit">涨停<span class="market-fns-limitup">&nbsp;152.43</span></span>
            <span>跌停<span class="market-fns-limitdown">&nbsp;134.56</span></span>
        </div>
        <!-- 今开昨收最高最低 -->
        <div class="market-fns-index pull-left">
            <span class="market-fns-index-unit">
                今开<span class="market-info-group-value" [ngClass]="{'price-mutile': realTimeList[0]?.floating < 0, 'price-add': realTimeList[0]?.floating > 0}">{{realTimeList[0]?.DayOpen}}</span>
            </span>
            <span class="market-fns-index-unit">
            昨收<span class="market-info-group-value" [ngClass]="{'price-mutile': realTimeList[0]?.floating < 0, 'price-add': realTimeList[0]?.floating > 0}">
                    {{realTimeList[0]?.YesterdayClose}}
                </span>
            </span>
            <span class="market-fns-index-unit">
                最低价
                <span class="market-info-group-value" [ngClass]="{'price-mutile': realTimeList[0]?.floating < 0, 'price-add': realTimeList[0]?.floating > 0}">
                    {{realTimeList[0]?.DayLow}}
                </span>
            </span>
            <span class="market-fns-index-unit">
                最高价
                <span class="market-info-group-value" [ngClass]="{'price-mutile': realTimeList[0]?.floating < 0, 'price-add': realTimeList[0]?.floating > 0}">
                    {{realTimeList[0]?.DayHigh}}
                </span>
            </span>
        </div>
        <!-- 登陆注册 -->
        <div class="market-fns-userinfo pull-right">
            请<a class="market-fns-limitdown" href="javascript:;">登录</a>或<a class="market-fns-limitdown" href="javascript:;">注册</a>后进行交易
        </div>
    </div>
    <!-- 图表+交易记录 -->
    <div class="chartTransaction">
        <div class="chartTransaction-chart">
            <chart [symbol]="symbol"></chart>
        </div>
        <div class="chartTransaction-transaction">
            <app-transaction-details [realTimeList]="realTimeList" [bottomposition]="bottomposition"></app-transaction-details>
        </div>
    </div>
    <!-- 委托、持仓+买多卖空 -->
    <div class="bottomposition" #bottomposition>
        <!-- 持仓 -->
        <div class="position">
            <app-entrust-and-position></app-entrust-and-position>
        </div>
        <!-- 交易 -->
        <div class="buyshort">
            <app-personal-transaction></app-personal-transaction>
        </div>
    </div>
</div>